<section class="orgs">

  <div class="col-md-4 aside">

    <div class="alert alert-info">
      <a ng-link="orgs({org: 'all'})" class="category" ng-class="{active: orgs.org=='all'}" translate>orgs.allorgs</a>
      <a ng-link="orgs({org: 'pending'})" class="category" ng-class="{active: orgs.org=='pending'}" translate>orgs.pending</a>
      <hr>
      <div class="create-btn">
        <a ng-click="orgs.create()" class="btn btn-default" translate>orgs.neworg</a>
      </div>
    </div>

  </div>

  <div class="col-md-8">

    <input type="text" class="filter-table form-control pull-right" ng-model="orgs.q" placeholder="{{'orgs.filter_orgs' | translate}}"></input>
    <i class="glyphicon glyphicon-remove-sign filter-table-reset" ng-show="orgs.q != ''" ng-click="orgs.q = ''"></i>
    <h3 class="groups-title">{{orgs.orgs.length}} <span translate>orgs.title</span></h3>

    <table class="table table-striped table-condensed">

      <thead>
        <tr>
          <th translate>org.name</th>
          <th translate>org.shortName</th>
          <th translate>org.membersCount</th>
        </tr>
      </thead>

      <tbody>
        <tr dir-paginate="org in orgs.orgs | filter:orgs.q | itemsPerPage: orgs.itemsPerPage">
          <td>
            <a ng-link="org({org: org.id, tab: 'infos'})" ng-class="{pending: org.status !== 'REGISTERED'}">
              {{::org.name}}
            </a>
          </td>
          <td>{{::org.shortName}}</td>
          <td>{{::org.membersCount}}</td>
        </tr>
      </tbody>

    </table>

    <dir-pagination-controls></dir-pagination-controls>

  </div>

  <div ng-if="orgs.newOrg" class="background" ng-cloack>

    <div class="panel panel-default">

      <div class="panel-heading">
        <a class="btn close" ng-click="orgs.close()">&times;</a>
        <span translate>orgs.neworg</span>
      </div>
      <div class="panel-body">
        <form class="form-horizontal" name="orgForm">

          <div ng-inline="templates/orgForm.tpl.html"
             ng-init="model=orgs.newInstance;promise=orgs.newInstance.$promise;required=orgs.required;orgTypeValues=orgs.orgTypeValues"></div>

          <hr>
          <button class="btn btn-primary pull-right" ng-disabled="orgForm.$invalid" ng-click="orgs.saveOrg()">
            <span translate>users.save</span>
          </button>
          <button class="btn btn-link pull-right" ng-click="orgs.close()" translate>users.cancel</button>
        </form>
      </div>

    </div>

  </div>

</section>
